<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <%--<meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">--%>
    <meta name="viewport" content="width=device-width, initial-scale=0.3, user-scalable=0, minimum-scale=0, maximum-scale=5.0,user-scalable=yes">
    <link rel="stylesheet" type="text/css" href="/css/street/street.css"/>
    <%--<link rel="stylesheet" href="/css/officialDocument/officialDocument.css">--%>
    <style>
        .blue_text{
            font-size: 14px;
            color: #2a588c;
            font-weight: bold;
        }
        .newNews tr td {
            border: 1px solid #c0c0c0;
        }
        .newNews tr td input{
            width: 54%;
            height: 30px;
            line-height: 30px;
            border-radius: 4px;
            border: 1px solid #ddd;
            padding-left: 10px;
        }
        .newNews tr td select{
            width: 54%;
            height: 30px;
            line-height: 30px;
            border-radius: 4px;
            border: 1px solid #ddd;
            padding-left: 10px;
        }
        .newNews tr td textarea{
            width: 54%;
            height: 80px;
            line-height: 30px;
            border-radius: 4px;
            border: 1px solid #ddd;
            padding-left: 10px;
            overflow-y: auto;
        }
        td{
            padding:10px;
        }
        tr {
            border: 1px solid #c0c0c0;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
            width: 79%;
            /* margin: 0 auto; */
            margin-top: 2%;
            margin-bottom: 50px;
            margin-left: 11%;
        }
        .new_but {
            width: 74px;
            border:none;
            margin:0 auto;
            height: 30px;
            line-height: 30px;
            border-radius: 4px;
            margin-left: 48%;
            padding-left: 22px;
            cursor: pointer;
            background: url(/img/sys/newdept.png) no-repeat;
            font-size: 12pt;
            font-family: Microsoft yahei,Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
            color: #fff!important;
        }
    </style>
    <script src="/lib/jQuery-File-Upload-master/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.ui.widget.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.iframe-transport.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.fileupload.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/layer/layer.js?20201106" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jquery.form.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/street/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/street/informationSet.js" type="text/javascript" charset="utf-8"></script>
    <title>网格信息设置</title>
</head>
<body style="overflow-y: hidden">
<div class="header">
    <img src="/img/icon_unitManagement.png" class="fl" style="margin-top: 7px;">
    <div class="headertitle"> 网格信息管理</div>
    <div class="empty">
    </div>
</div>
<div class="contmain clearfix">
    <div class="fl cont_left">
        <ul>
            <li class="dept_li">
                <img src="/img/sys/icon_sectorList.png" style="vertical-align: middle;width: 15px;margin-right: 10px;" alt="">
                网格信息
            </li>
            <li class="pick">
                <ul id="pickmain">

                </ul>
            </li>
        </ul>
    </div>
    <div class="contRight">
        <div class="nav_box clearfix">
            <div class="nav_t1"><img src="/img/sys/new_dept.png"></div>
            <div class="nav_t2">新建网格信息</div>
            <div class="head_rig" id="head_rig_">
                <h1 style="cursor:pointer;float: right" class="new_dept deleteid">删除</h1>
                <h1 style="cursor:pointer;float: right" class="new_dept typsl" data-id="1">新建网格</h1>

            </div>
        </div>
        <form id="datasave" action="">
        <table class="newNews" style="width: 79%;margin: 0 auto;margin-bottom: 20px">
            <input type="hidden" name="gridId" class="gridIds">
            <input type="hidden" name="dengji" value="1">
            <tbody>
                <tr>
                    <td width="25%" class="blue_text">社区名称(网格名称):</td>
                    <td>
                        <input type="text" name="gridName" placeholder="请输入社区名称">
                    </td>
                </tr>
                <tr>
                    <td width="25%" class="blue_text">社区范围:</td>
                    <td>
                        <textarea name="scope" id="" placeholder="请输入社区范围"></textarea>
                    </td>
                </tr>
                <tr>
                    <td width="25%" class="blue_text" >社区面积:</td>
                    <td>
                        <input type="text" name="area" placeholder="请输入社区面积">
                    </td>
                </tr>
                <tr>
                    <td width="25%" class="blue_text" >社区上级网格:</td>
                    <td>
                        <select name="upperGrid" id="">
                            <option value="0">请选择</option></select>

                    </td>
                </tr>
                <tr>
                    <td width="25%" class="blue_text">网格员:</td>
                    <td>
                        <input type="text" readonly="readonly" id="gridUserId"  placeholder="请选择网格员">
                        <input type="hidden" name="gridUserId">
                        <a href="javascript:void (0)" class="addrole" style="color: #00a2d4">添加</a>
                        <a href="javascript:void (0)" class="deletedatas" style="color: #00a2d4;">清除</a>
                    </td>
                </tr>
                <tr>
                    <td width="25%" class="blue_text">社区坐标:</td>
                    <td>
                        <%--<input type="text" name="mapInfo" readonly="readonly" placeholder="请输入社区坐标">--%>
                        <textarea name="mapInfo" id=""  placeholder="请输入社区坐标"></textarea>
                        <a href="javascript:;" style="color: #00a2d4" class="xuanzezuobiao">选择坐标</a>
                    </td>
                </tr>
                <tr>
                    <td width="25%" class="blue_text">社区标志坐标:</td>
                    <td>
                        <%--<input type="text" name="mapInfo" readonly="readonly" placeholder="请输入社区坐标">--%>
                        <input type="text" name="mapInfoFlag" placeholder="请选择标志坐标">
                        <a href="javascript:;" style="color: #00a2d4" class="choosezb">选择标志坐标</a>
                    </td>
                </tr>
                <tr>
                    <td width="25%" class="blue_text">社区电话:</td>
                    <td>
                        <input type="text" name="telNo" placeholder="请输入社区电话">
                    </td>
                </tr>
                <tr>
                    <td width="25%" class="blue_text">社区位置:</td>
                    <td>
                        <input type="text" name="location" placeholder="请输入社区位置">
                    </td>
                </tr>
                <tr>
                    <td width="25%" class="blue_text">包片领导:</td>
                    <td>
                        <input type="text"   id="baopianId" readonly="readonly" placeholder="请选择包片领导">
                        <input type="hidden" name="baopianId">
                        <a href="javascript:void (0)" class="addrole" style="color: #00a2d4">添加</a>
                        <a href="javascript:void (0)" class="deletedatas" style="color: #00a2d4;">清除</a>
                    </td>
                </tr>
                <tr>
                    <td width="25%" class="blue_text">包片领导联系方式:</td>
                    <td>
                        <input type="text" name="baopianTel" placeholder="请输入包片领导联系方式">
                    </td>
                </tr>
                <tr>
                    <td width="25%" class="blue_text">包居科长:</td>
                    <td>
                        <input type="text" readonly="readonly"  id="baojuId"  placeholder="请选择包居科长">
                        <input type="hidden" name="baojuId">
                        <a href="javascript:void (0)" class="addrole" style="color: #00a2d4">添加</a>
                        <a href="javascript:void (0)" class="deletedatas" style="color: #00a2d4;">清除</a>
                    </td>
                </tr>
                <tr>
                    <td width="25%" class="blue_text">包居科长联系方式:</td>
                    <td>
                        <input type="text" name="baojuTel" placeholder="请输入包居科长联系方式">
                    </td>
                </tr>
                <tr>
                    <td width="25%" class="blue_text">居委会主任:</td>
                    <td>
                        <input type="text" readonly="readonly"   id="directorId"  placeholder="请选择居委会主任">
                        <input type="hidden" name="directorId">
                        <a href="javascript:void (0)" class="addrole" style="color: #00a2d4">添加</a>
                        <a href="javascript:void (0)" class="deletedatas" style="color: #00a2d4;">清除</a>
                    </td>
                </tr>
                <tr>
                    <td width="25%" class="blue_text">居委会联系方式:</td>
                    <td>
                        <input type="text" name="directorTel" placeholder="请输入居委会联系方式">
                    </td>
                </tr>
                <tr>
                    <td width="25%" class="blue_text">居委会副主任:</td>
                    <td>
                        <input type="text" readonly="readonly" id="viceDirectorId"  placeholder="请选择居委会副主任">
                        <input type="hidden" name="viceDirectorId">
                        <a href="javascript:void (0)" class="addrole" style="color: #00a2d4">添加</a>
                        <a href="javascript:void (0)" class="deletedatas" style="color: #00a2d4;">清除</a>
                    </td>
                </tr>
                <tr>
                    <td width="25%" class="blue_text">社区楼栋数:</td>
                    <td>
                        <input type="text" name="communityBuilding" placeholder="请输入社区楼栋数">
                    </td>
                </tr>
                <tr>
                    <td width="25%" class="blue_text">社区总户数:</td>
                    <td>
                        <input type="text" name="households"  placeholder="请输入社区总户数">
                    </td>
                </tr>
                <tr>
                    <td width="25%" class="blue_text">社区总人口:</td>
                    <td>
                        <input type="text" name="population" placeholder="请输入社区总人口">
                    </td>
                </tr>
                <tr>
                    <td width="25%" class="blue_text">流动人口:</td>
                    <td>
                        <input type="text" name="floatingPopulation" placeholder="请输入流动人口">
                    </td>
                </tr>
                <tr>
                    <td width="25%" class="blue_text">户籍人员:</td>
                    <td>
                        <input type="text" name="registeredPopulation" placeholder="请输入户籍人员">
                    </td>
                </tr>
                <tr>
                    <td width="25%" class="blue_text">常住人口:</td>
                    <td>
                        <input type="text" name="permanentPopulation" placeholder="请输入常住人口">
                    </td>
                </tr>
                <tr>
                    <td width="25%" class="blue_text">居住建筑数:</td>
                    <td>
                        <input type="text" name="residentialBuilding" placeholder="请输入居住建筑数">
                    </td>
                </tr>
                <tr>
                    <td width="25%" class="blue_text">商用建筑数:</td>
                    <td>
                        <input type="text" name="commercialBuilding" placeholder="请输入商用建筑数">
                    </td>
                </tr>
                <tr>
                    <td width="25%" class="blue_text">出租屋数:</td>
                    <td>
                        <input type="text" name="rental" placeholder="请输入出租屋数">
                    </td>
                </tr>
                <tr>
                    <td width="25%" class="blue_text">社区描述:</td>
                    <td>
                        <textarea name="gridInfo" id="" placeholder="请输入社区描述"></textarea>
                    </td>
                </tr>
                <tr>
                    <td width="25%" class="blue_text">社区照片:</td>
                    <td style="position:relative;">
                        <input data-url="/upload?module=grid" type="file" multiple="multiple" name="file"  accept="image/*" id="uploadinputimg"  class="w-icon5" style="position: absolute;opacity: 0;width: 70px;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0)">
                        <a href="#" id="uploadimg"><img style="margin-right:5px;" src="../img/icon_uplod.png"/><fmt:message code="global.th.fileup" /></a>
                        <div class="img_box"></div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <button type="button" class="new_but typeid" id="new" data-id="1" style="outline: none;">保存</button>
                    </td>
                </tr>
            </tbody>
        </table>
        </form>

    </div>
</div>



<script>
    $('.contmain').height($(window).height()-$('.header').height()-3);
    function theEcho(str) {
        $('[name="mapInfo"]').val(str)
    }

    function sendEcho(){
        return  $('[name="mapInfo"]').val()
    }
    //    设置坐标
    function setZuobiao(str){
//        $('.gridLocation').val(str)
        $('input[name="mapInfoFlag"]').val(str)
    }
    $(function () {
        $('.xuanzezuobiao').click(function () {
            if($('[name="dengji"]').val()==1){
                window.open('/street/mapCoordinates?type=1&dataType=sheqv')
            }else {
                window.open('/street/mapCoordinates?type=1&dataType=wangge')
            }
        })
        //    点击坐标定位
        $('.choosezb').click(function () {
//        window.open('/street/chooseMap')
            window.open('/street/mapCoordinates?type=4')
        })



        $('#uploadinputimg').fileupload({
            dataType:'json',
            done: function (e, data) {
                if(data.result.obj != ''){
                    var data = data.result.obj;
                    var str = '';
                    for (var i = 0; i < data.length; i++) {
                        str +=  '<div style="position:relative;float:left;margin: 10px;">'+
                                    '<img src="/xs?'+ data[i].attUrl +'" alt="" style="width: 150px;height: 70px;">'+
                                    '<img class="deImgs" style="cursor: pointer;position: absolute;" src="../img/file/icon_deletecha_03.png">'+
                                '<input type="hidden" name="attachmentName" value="' + data[i].attachName + '*"><input type="hidden" name="attachmentId" class="inHidden" value="' + data[i].aid + '@' + data[i].ym + '_' + data[i].attachId + ',"></div>';
                    }
                    $('.img_box').html(str);
                }else{
                    layer.alert('添加附件大小不能为空!',{},function(){
                        layer.closeAll();
                    });
                }
            }
        });
    });
    //str += '<div class="dech" deUrl="' + data[i].attUrl+ '"><a href="<%=basePath %>download?'+encodeURI(data[i].attUrl)+'" NAME="' + data[i].attachName + '*"><img style="margin-right:10px;" src="../img/attachment_icon.png"/>' + data[i].attachName + '</a><img class="deImgs" style="margin-left:5px;cursor: pointer;" src="../img/file/icon_deletecha_03.png"/><input type="hidden" class="inHidden" value="' + data[i].aid + '@' + data[i].ym + '_' + data[i].attachId + ',"></div>';

</script>
</body>
</html>
